<%@page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
	<script language="javascript">
		$(function() {
			var btnGuardar=$('.ui-dialog-buttonset').find(':button :first');
			$("#nombreLogin").blur(function(){
				if($("#nombreLogin").val().length>0){
					btnGuardar.attr('disabled','true');
					btnGuardar.css({ opacity: 0.5 });
			    	$.getJSON("../datosjson/usuarioConsultarSiExiste", {"usuario.nombre":$("#nombreLogin").val()},
				      		function( data ) {
		      				if(data.existe==true){
		      					$("#nombreLogin").addClass('error');  						      				
		      					$("#nombreLogin").next('div').show();  						      				
		      				}else{
		      					$("#nombreLogin").removeClass('error');  						      				
		      					btnGuardar.css({ opacity: 1 });
		      					btnGuardar.removeAttr('disabled');
		      					$("#nombreLogin").next('div').hide();  						      				
		      				}
						});
				};	
			});
			
			$("#user_form").validate({
				submitHandler: function(){
    			$('#dialog_form').dialog('close');
		    		$('#users_list').html('<img alt="Loading..." src="../img/ajaxLoader.gif" />');
		    		$.post('../usuarios/guardarUsuario', $('#user_form').serialize())
			    			.complete(function(){
					    	  	cargarTablita();
				    		});
	    			$('#dialog_form').remove();
				}
			});
		});
	</script>
	<script>
	    function saveButton() { $('#user_form').submit(); };
	</script>
	
	<h2><s:property value="#title"/></h2>
	
	<s:actionerror />
	<s:actionmessage />
	<s:form id="user_form">
		<s:hidden name="usuario.idUsuario"></s:hidden>
		<table>
		 	<tr>
				<td>Nombre Completo</td>
				<td><s:textfield name="usuario.nombreCompleto" theme="simple" cssClass="required" size="30" /></td>
			</tr>
			
			<tr>
				<td>Nombre de Usuario</td>
				<td><s:textfield name="usuario.nombre" theme="simple" cssClass="required" size="30" id="nombreLogin"/><div style="display: none;" class="error">El usuario ya existe</div></td>
			</tr>
			
 			<tr>
				<td>Rol</td>
				<td>
					<s:select list="roles" theme="simple" listKey="id" listValue="nombre" headerKey="-1"
					headerValue="-- Seleccione un Rol --" name="selectedRol" 
					value="selectedRol" cssClass="required" id="rol" notEqual="-1"/>
				</td>		
			</tr>
			<tr>
				<td>Contraseña</td>
				<td><s:password name="usuario.clave" theme="simple" cssClass="required" id="password" size="30" /></td>
			</tr>
			<tr>
				<td>Confirmar Contraseña</td>
				<td><s:password name="confirm" theme="simple" size="30" equalTo="#password"/></td>
			</tr>
		</table>
	</s:form>